<template>
  <el-menu :default-openeds="['1', '3']" style="min-height:100%;overflow-x: hidden"
           background-color="#333744"
           text-color="#fff"
           active-text-color="#ffd04b"
           :collapse-transition="false"
           :collapse="isCollapse"
           router
           @select="handleSelect"
  >
    <div style="height: 60px;line-height: 60px;text-align: center">
      <img src="../assets/2(已去底).jpg" style="width: 30px;position: relative;top: 10px;margin-right: 5px">
      <b style="color: white" v-show="!isCollapse">后台管理系统</b>
    </div>
    <el-menu-item index="/manage/home">
      <template slot="title"><i class="el-icon-s-home"></i>
        <span slot="title">主页</span>
      </template>
    </el-menu-item>

    <!-- 用户管理 -->
    <el-submenu index="2">
      <template slot="title"><i class="el-icon-s-custom"></i>
        <span slot="title">用户管理</span>
      </template>
      <el-menu-item index="/manage/user">
        <i class="el-icon-menu"></i>
        <span slot="title">用户列表</span>
      </el-menu-item>
    </el-submenu>

    <!-- 权限管理 -->
    <el-submenu index="3">
      <template slot="title"><i class="el-icon-s-tools"></i>
        <span slot="title">权限管理</span>
      </template>
      <el-menu-item index="/manage/role_list">
        <i class="el-icon-menu"></i>
        <span slot="title">角色列表</span>
      </el-menu-item>
      <el-menu-item index="/manage/authority_divide">
        <i class="el-icon-menu"></i>
        <span slot="title">权限分配</span>
      </el-menu-item>
    </el-submenu>

    <!-- 商品管理 -->
    <el-submenu index="4">
      <template slot="title"><i class="el-icon-s-goods"></i>
        <span slot="title">商品管理</span>
      </template>
      <el-menu-item index="/manage/goods_list">
        <i class="el-icon-menu"></i>
        <span slot="title">商品列表</span>
      </el-menu-item>
      <el-menu-item index="/manage/goods_cate">
        <i class="el-icon-menu"></i>
        <span slot="title">商品分类</span>
      </el-menu-item>
    </el-submenu>

    <!-- 订单管理 -->
    <el-submenu index="5">
      <template slot="title"><i class="el-icon-s-order"></i>
        <span slot="title">订单管理</span>
      </template>
      <el-menu-item index="/manage/order_list">
        <i class="el-icon-menu"></i>
        <span slot="title">订单列表</span>
      </el-menu-item>
    </el-submenu>

    <!-- 数据管理 -->
    <el-submenu index="5">
      <template slot="title"><i class="el-icon-s-data"></i>
        <span slot="title">数据管理</span>
      </template>
      <el-menu-item index="/manage/data_statistics">
        <i class="el-icon-menu"></i>
        <span slot="title">数据统计</span>
      </el-menu-item>
    </el-submenu>

  </el-menu>
</template>

<script>
import Bus from '../Bus.js'
export default {
  name: "Aside",
  // props:{
  //   isCollapse:Boolean
  // },
  data(){
    return{
      currentPathName:'',
      isCollapse:false
    }
  },
  mounted(){
    Bus.$on('isCollapse',(data)=>{
      this.isCollapse=data
    })
  },
  methods:{
    handleSelect(index){

      // console.log(index)
      // console.log(this.$router.options.routes)


    },


  }
}
</script>

<style scoped>
el-menu--collapse span {
  visibility: hidden;
}
</style>